<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0">
    <title>hairline</title>
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/hairline.css">

</head>
<body style="background-color: #f2f2f2">
<div class="hairline">
    <div class="hairline-left">
        <svg class="icon" aria-hidden="true" style="color: #F77238">
            <use xlink:href="#icon-phone"></use>
        </svg>
        <label>手机号</label>
    </div>
    <div class="hairline-right">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-right"></use>
        </svg>
    </div>
</div>

<div class="hairline hairline-change-line">
    <div class="hairline-left">
        <svg class="icon" aria-hidden="true" style="color: #FAC450">
            <use xlink:href="#icon-mail"></use>
        </svg>
        <label>邮箱号</label>
    </div>
    <div class="hairline-right">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-right"></use>
        </svg>
    </div>
</div>

<div class="hairline hairline-change-line">
    <div class="hairline-left">
        <svg class="icon" aria-hidden="true" style="color: #2AA2FF">
            <use xlink:href="#icon-mail"></use>
        </svg>
        <label>银行卡</label>
    </div>
    <div class="hairline-right">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-right"></use>
        </svg>
    </div>
</div>

<div class="hairline hairline-change-line">
    <div class="hairline-left">
        <svg class="icon" aria-hidden="true" style="color: #C4DC3C">
            <use xlink:href="#icon-mail"></use>
        </svg>
        <label>设置密码</label>
    </div>
    <div class="hairline-right">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-right"></use>
        </svg>
    </div>
</div>

<div class="hairline">
    <div class="hairline-left">
        <svg class="icon" aria-hidden="true" style="color: #BAB5FA">
            <use xlink:href="#icon-mail"></use>
        </svg>
        <label>常见问题</label>
    </div>
    <div class="hairline-right">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-right"></use>
        </svg>
    </div>
</div>

<div class="hairline hairline-change-line">
    <div class="hairline-left">
        <svg class="icon" aria-hidden="true" style="color: #D8C298">
            <use xlink:href="#icon-mail"></use>
        </svg>
        <label>意见反馈</label>
    </div>
    <div class="hairline-right">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-right"></use>
        </svg>
    </div>
</div>

<div class="hairline">
    <div class="hairline-left">
        <label>邮政编码</label>
    </div>
    <div class="hairline-content">
        <input type="text" placeholder="街道门牌、楼层房间号">
    </div>
    <div class="hairline-right">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-blank"></use>
        </svg>
    </div>
</div>

<div class="hairline">
    <div class="hairline-left">
        <label>两字</label>
    </div>
    <div class="hairline-content">
        <input type="text" placeholder="邮政编码">
    </div>
    <div class="hairline-right">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-right"></use>
        </svg>
    </div>
</div>

<div class="hairline">
    <div class="hairline-left">
        <label>靠右</label>
    </div>
    <div class="hairline-right">
        <label>文本提示</label>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-right"></use>
        </svg>
    </div>
</div>

<div class="hairline">
    <div class="hairline-item3">
        <label>设为默认收货地址</label>
    </div>

    <div class="hairline-right">
        <input type="checkbox">
    </div>
</div>

<script src="images/icon/iconfont.js"></script>
</body>
</html>